<template>
  <view class="other-btn-container">
    <view
      class="rules"
      :class="item.new ? 'news' : ''"
      hover-class="hover-bubble"
      v-for="(item, index) in btnList"
      :key="index"
      @tap="onClickOperate($event, item.name, {})"
    >
      <img class="bg-r" src="../img/1.png" alt="" />
      <img class="icon" :class="item.name" :src="item.img" alt="" />
      <button class="open-btn"></button>
    </view>
  </view>
</template>
<script>
import look from '../img/look-0.png';
import share from '../img/share-0.png';
// import live from '../img/live-0.png';
import upping from '../img/upping.png';
import tools from '@/shopro/utils/tools';
const _delay = tools.delayDither(300);
export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: '',
  components: {},
  data() {
    return {
      btnList: [
        {
          name: 'look',
          img: look,
        },
        {
          name: 'share',
          img: share,
        },
        {
          name: 'up',
          img: upping,
        },
        // {
        //   name: 'live',
        //   img: live,
        //   new: true,
        // },
      ],
    };
  },
  // 计算属性 适配者模式
  computed: {},
  // 数据监听
  watch: {},
  /**
   * 生命周期 类似 发布订阅者模式
   * 在实例初始化之前被调用
   */
  beforeCreate() {},
  // 在实例创建完成后被立即调用
  created() {},
  // 在挂载开始之前被调用
  beforeMount() {},
  // 挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用nextTick
  mounted() {},
  // 数据更新时调用，发生在虚拟 DOM 打补丁之前
  beforeUpdate() {},
  // 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
  updated() {},
  // 实例销毁之前调用。在这一步，实例仍然完全可用
  beforeDestroy() {},
  // Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
  destroyed() {},
  methods: {
    /**
     *  页面点击事件 防抖
     * @param {Object} ev  $event
     * @param {String} name 执行名称
     * @param {Object} data 传值
     */
    onClickOperate(ev, name, data = {}) {
      _delay(() => {
        this.$emit('otherBtn', { name, type: true });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.other-btn-container {
  position: fixed;
  top: 180rpx;
  right: 20rpx;
  z-index: 100;

  animation: fade 1s linear 0s 1 normal none;

  .rules.news {
    &::before {
      content: '';
      position: absolute;
      top: 2rpx;
      right: 6rpx;
      z-index: 10;
      width: 20rpx;
      height: 20rpx;
      border-radius: 50%;
      background-color: #ff0000;
      box-shadow: 0px 0px 6px rbga(0, 0, 0, 0.6);
    }
  }
  .rules {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-top: 15rpx;

    width: 80rpx;
    height: 80rpx;
    .bg-r {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    .icon {
      transform: scale(1.2);
    }
    .icon.look {
      width: 34rpx;
      height: 38rpx;
    }
    .icon.share {
      width: 40rpx;
      height: 37rpx;
    }
    .icon.live {
      width: 30rpx;
      height: 32rpx;
    }
    .icon.up {
      width: 30rpx;
      height: 31rpx;
    }
  }
  .open-btn {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    opacity: 0;
  }
}
</style>
